<script>
import {attachImg, getComments, release, reply} from "@/api";
import { ElMessage } from "element-plus";

export default {
  name: "CommentByRelease",
  components: {},
  data() {
    return {
      commentList: [],
      dialogVisible: false,
      drawer: false,
      hospitalComments: {},
      hospitalForums:{},
      forums: null, // This will hold detailed information of the clicked post
    };
  },
  mounted() {
    this.getCommentList();
  },
  methods: {
    attachImg,
    getCommentList() {
      getComments("/comments/queryByrelease").then((res) => {
        this.commentList = res.data.data;
      });
    },
    formatDate(dateString) {
      return this.$dayjs(dateString).format("YYYY-MM-DD");
    },
    fetchComments(postId) {
      getComments(`/comments/selectbyidAll?id=${postId}`).then((res) => {
        this.forums.comments = res.data.data;
      });
    },
    showDetails(comment) {
      this.forums = comment;
      this.fetchComments(comment.id);
      this.hospitalForums.postnumber = comment.id;
      this.drawer = true; // 显示抽屉
    },
    addForums() {
      if (!this.hospitalForums.comment) {
        ElMessage({
          message: "内容不能为空",
          type: "warning",
          duration: 2000,
        });
        return;
      }

      const forumItem = {
        username: localStorage.getItem("username"),
        comment: this.hospitalForums.comment,
        postnumber: this.hospitalForums.postnumber,
      };

      const config = {
        headers: {
          "Content-Type": "application/json",
        },
      };

      this.hospitalForums.comment = "";

      reply("/forum/insert", forumItem, config).then((res) => {
        if (res.data.code === 200) {
          ElMessage({
            message: res.data.msg,
            type: "success",
            duration: 2000,
          });

          // Increment the comment count locally before fetching updated data
          this.forums.commentsnumber += 1;

          // Refresh the comment section with the new data
          this.fetchComments(this.forums.id);

        } else {
          ElMessage({
            message: res.data.msg,
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    insertComment() {
      if (!this.hospitalComments.title || !this.hospitalComments.content) {
        ElMessage({
          message: "标题和内容不能为空",
          type: "warning",
          duration: 2000,
        });
        return;
      }
      this.dialogVisible = false;
      const config = {
        headers: {
          "Content-Type": "application/json",
        },
      };
      const commentItem = {
        username: localStorage.getItem("username"),
        title: this.hospitalComments.title,
        content: this.hospitalComments.content,
      };
      // Clear input fields
      this.hospitalComments.title = "";
      this.hospitalComments.content = "";
      release("/comments/insertAll", commentItem, config).then((res) => {
        if (res.data.code === 200) {
          ElMessage({
            message: res.data.msg,
            type: "success",
            duration: 2000,
          });
          this.getCommentList();
        } else {
          ElMessage({
            message: res.data.msg,
            type: "error",
            duration: 2000,
          });
        }
      });
    },
  },
};
</script>

<template>
  <div class="app">
    <h1 class="title">社区</h1>
    <el-icon :size="40">
      <Edit class="edit" @click="dialogVisible = true"/>
    </el-icon>
    <el-dialog v-model="dialogVisible" title="发布帖子" width="500px">
      <el-input v-model="hospitalComments.title" style="width: 240px" placeholder="请输入标题"/>
      <el-input
          v-model="hospitalComments.content"
          style="width: 240px"
          :rows="3"
          type="textarea"
          placeholder="这一刻的想法"
      />
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="insertComment">发布评论</el-button>
      </div>
    </el-dialog>
    <div class="post" v-for="item in commentList" :key="item.id" @click="showDetails(item)">
      <div class="post-header">
        <div class="author">{{ item.username }}</div>
      </div>
      <div class="post-title">{{ item.title }}</div>
      <div class="post-content">
        <el-text truncated>{{ item.content }}</el-text>
      </div>
      <div class="post-footer">
        <div class="date">{{ formatDate(item.releasedate) }}</div>
        <div class="popularity">人气：{{ item.popularity }}</div>
        <div class="commentsnumber">评论数: {{ item.commentsnumber }}</div>
      </div>
    </div>
    <!-- Drawer with detailed information -->
    <el-drawer v-model="drawer" title="详情" direction="rtl" size="33%">
      <div v-if="forums">
        <!-- Title section -->
        <h3>{{ forums.title }}</h3>
        <div class="forum-header">
          <span class="author">{{ forums.username }}</span>
          <span class="release-date">{{ formatDate(forums.releasedate) }}</span>
        </div>

        <!-- Content section -->
        <p class="forum-content">{{ forums.content }}</p>
        <el-image v-if="forums.picpath" :src="attachImg(forums.picpath)" width="150px"/>
        <!-- Popularity and Comments number section -->
        <div class="forum-footer">
          <span>人气 {{ forums.popularity }}</span>
          <span>评论数 {{ forums.commentsnumber }}</span>
        </div>

        <!-- Comments Section -->
        <div class="comments-section">
          <h4>评论区</h4>
          <div class="comment" v-for="comment in forums.comments" :key="comment.id">
            <div class="comment-header">
              <span class="comment-author">{{ comment.forumUsername }}</span>
              <!-- Use forumUsername instead of username -->
              <span class="comment-date">{{ formatDate(comment.commentTime) }}</span>
            </div>
            <div class="comment-content">{{ comment.comment }}</div>
          </div>
        </div>


        <!-- Input for new comment -->
        <div class="new-comment">
          <el-input
              v-model="hospitalForums.comment"
              type="textarea"
              placeholder="回复评论"
              class="comment-input"
          />
          <el-button type="primary" @click="addForums">发布评论</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped>
.app {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 20px;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.post {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 15px;
}

.post-header {
  display: flex;
  align-items: center;
}

.post-header .author {
  font-weight: bold;
}

.post-footer .date {
  color: #888;
  font-size: 0.9em;
  font-weight: bold;
}

.post-title {
  font-weight: bold;
  margin-top: 10px;
  text-align: left;
  padding-left: 10px;
}

.post-content {
  margin-top: 10px;
  text-align: left;
  padding-left: 10px;
}

.post-footer {
  display: flex;
  margin-top: 10px;
  font-size: 0.9em;
  color: #888;
}

.post-footer .popularity {
  margin-left: auto;
}

.post-footer .commentsnumber {
  margin-left: 10px;
}

.edit {
  position: fixed;
  bottom: 100px;
  right: 70px;
}

.forum-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.forum-content {
  margin: 15px 0;
  color: #333;
  font-size: 16px;
}

.forum-footer {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 14px;
  margin-bottom: 20px;
}

.comments-section {
  margin-top: 20px;
}

.comment {
  background: #f5f5f5;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  color: #555;
  font-size: 14px;
}

.comment-content {
  margin-top: 5px;
  font-size: 15px;
}

.new-comment {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.comment-input {
  margin-bottom: 10px;
}

/* Enforce left alignment for all text */
h3, p, span {
  text-align: left;
}

.forum-header,
.forum-footer,
.comment-header,
.comment-content,
.new-comment {
  text-align: left;
}

/* Additional styling */
.forum-content {
  margin: 15px 0;
  color: #333;
  font-size: 16px;
  text-align: left;
}

.comment-content {
  margin-top: 5px;
  font-size: 15px;
  text-align: left;
}

</style>